<template>
   <van-popup class="ykb-shop" position="right" :overlay="false" v-model="showShopPanel">
     <van-nav-bar title="益康币商城" left-arrow @click-left="closeShopPanel" left-text="返回">
     </van-nav-bar>
     <div class="ykb-shop-hd">
       <van-row>
         <van-col span="4">
           <img src="/static/images/user.jpg" alt="">
         </van-col>
         <van-col span="12" class="col2">
           <span>我的益康币: <b>5000</b>个</span>
         </van-col>
         <van-col span="8">
          <van-button size="small">签到</van-button>
         </van-col>
      </van-row>
     </div>
     <div class="ykb-shop-bd">
       <div class="m1">
           <h5 class="hd">--- 店铺推荐 优惠不断 ---</h5>
           <div class="bd">
             <van-row>
               <van-col span="12">
                 <b>
                   开门庆典
                  <label>99元3件</label>
                 </b>
                 <img src="/static/images/product/1.jpg" alt="">
               </van-col>
               <van-col span="12">
                 <b>
                   佳节送祝福
                  <label>9.9秒杀</label>
                 </b>
                 <img src="/static/images/product/2.jpg" alt="">
               </van-col>
               <van-col span="12">
                 <b>
                   谢玲旗舰店
                  <label>爆低至5折</label>
                 </b>
                 <img src="/static/images/product/3.jpg" alt="">
               </van-col>
               <van-col span="12">
                 <b>
                   东道送健康
                  <label>健康暖心</label>
                 </b>
                 <img src="/static/images/product/4.jpg" alt="">
               </van-col>
            </van-row>
           </div>
           <div class="ft">
              <van-button size="small">发现更多好店>></van-button>
           </div>
       </div>
       <div class="m2">
           <h5 class="hd">--- 益康币优惠购 ---</h5>
           <div class="bd">
             <van-row>
               <van-col span="12">
                  <img src="/static/images/product/p1.jpg" alt="">
                 <b>
                  <span class="pro-name">【送手机卡】智能手表成人电话手表插卡男士防水wifi安卓超长待机多功能微信学生女运动手表 钛泽银(4G内存+送手机卡)</span>
                  <label>￥378.00+<span class="ykb">100<van-icon name="gold-coin"/></span></label>
                 </b>
               </van-col>
               <van-col span="12">
                 <img src="/static/images/product/p2.jpg" alt="">
                 <b>
                   <span class="pro-name">第一眼 Q9智能蓝牙音箱重低音炮便携式迷你电脑音响台式无线创意闹钟小钢炮户外插卡收音机 钛灰银</span>
                   <label>￥99.00+<span class="ykb">10<van-icon name="gold-coin"/></span></label>
                 </b>
               </van-col>
               <van-col span="12">
                 <img src="/static/images/product/p3.jpg" alt="">
                 <b>
                   <span class="pro-name">九牧 JOMOO Z1D6025T-SA-CJM305全自动遥控智能马桶一体机 变频恒温 智净节</span>
                  <label>￥2999.00+<span class="ykb">1050<van-icon name="gold-coin"/></span></label>
                 </b>
               </van-col>
               <van-col span="12">
                 <img src="/static/images/product/p4.jpg" alt="">
                 <b>
                   <span class="pro-name">小米（MI）小米电视4A 标准版 43英寸 HDR 2GB+8GB 四核64位处理器 全高清智能语音网络平板电视（L43M5-AZ）</span>
                  <label>￥1899.00+<span class="ykb">99<van-icon name="gold-coin"/></span></label>
                 </b>

               </van-col>
            </van-row>
           </div>
           <div class="ft">
              <van-button size="small" @click="$router.push({path:'/preferentialProductList'})">更多优惠商品>></van-button>
           </div>
       </div>
       <div class="m3">
           <h5 class="hd">--- 购物返币 ---</h5>
           <div class="bd">
             <van-row>
               <van-col span="8">
                 <img src="/static/images/product/p1.jpg" alt="">
                 <span class="pro-name">【送手机卡】智能手表成人电话手表插卡男士防水wifi安卓超长待机多功能微信学生女运动手表 钛泽银(4G内存+送手机卡)</span>
                 <b>￥378.00</b>
                 <van-tag mark type="danger">返币100</van-tag>
               </van-col>
               <van-col span="8">
                  <img src="/static/images/product/p2.jpg" alt="">
                  <span class="pro-name">第一眼 Q9智能蓝牙音箱重低音炮便携式迷你电脑音响台式无线创意闹钟小钢炮户外插卡收音机 钛灰银</span>
                   <b>￥2999.00</b>
                   <van-tag mark type="danger">返币150</van-tag>
               </van-col>
               <van-col span="8">
                 <img src="/static/images/product/p3.jpg" alt="">
                 <span class="pro-name">九牧 JOMOO Z1D6025T-SA-CJM305全自动遥控智能马桶一体机 变频恒温 智净节</span>
                  <b>￥1899.00</b>
                  <van-tag mark type="danger">返币80</van-tag>
               </van-col>
            </van-row>
           </div>
           <div class="ft">
              <van-button size="small" @click="$router.push({path:'/fbProductList'})">更多返币商品>></van-button>
           </div>
       </div>
       <div class="recommend">
          <img src="/static/images/home/icon-six.jpg" alt="" class="title">
          <product-list-square :pro="m2Pro"></product-list-square>
       </div>
     </div>
     <div class="ykb-shop-ft">
     </div>
   </van-popup>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
export default {
  props: ['showShopPanel'],
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'm2Pro'
    ])
  },
  created() {
     this.getM2Pro()
  },
  methods: {
    ...mapActions([
      'getM2Pro'
    ]),
    // 关闭益康币商城面板
    closeShopPanel () {
      this.$emit('closeShopPanel')
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.ykb-shop{
  background-color: #f2f2f2;
  width: 100%;
  height: 101%;
  overflow-y: scroll;
  &-hd{
    padding: px2rem(10px);
    // background-color: rgba(#850505, 0.77);
    background-image: url('/static/images/shop/bg-5.png');
    background-size: cover;
    background-repeat: no-repeat;
    img{
      width: px2rem(80px);
      height: px2rem(80px);
      border-radius: px2rem(80px);
    }
    .van-col{
      padding: px2rem(20px) 0;
      // border: 1px solid #f2f2f2;
      display: flex;
        // height: px2rem(80px);
      line-height: px2rem(80px);
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
      align-content: center;
      // background-color: #2492e7
    }
    .col2{
      -webkit-align-items: left;
      align-items: left;
      -webkit-justify-content: left;
      justify-content: center;
      align-content: left;
      // color: #fff;
      b{
        @include font-dpr(18px);
        color:#999127;
      }

    }
    button{
      margin-top: px2rem(10px);
      border-radius: px2rem(25px);
      // background-color: rgba(#850505, 0.77)
    }
  }
  &-bd{
    >.m1,.m2,.m3{
      width: 100%;
      margin:px2rem(10px) 0;
      background-color: #fff;
      .hd{
        width: 100%;
        height: px2rem(80px);
        text-align: center;
        line-height: px2rem(80px);
        @include font-dpr(16px);
        color: #999127;
      }
      .bd{
        img{
          width: 25%;
          height: px2rem(80px);
          margin-left: px2rem(20px);
        }
        .van-col{
          padding: px2rem(20px) 0;
          border: 1px solid #f2f2f2;
          line-height: px2rem(35px);
          display: flex;
          flex-direction: row;
          -webkit-align-items: center;
          align-items: center;
          -webkit-justify-content: center;
          justify-content: center;
          align-content: center;
          font-weight: bolder;
          @include font-dpr(14px);
        }
        label{
          @include font-dpr(12px);
          font-weight: normal;
          display: block;
        }
      }
      .ft{
        padding: px2rem(10px) px2rem(20px);
        text-align: center;
        background-image: url('/static/images/shop/bg-1.png');
        background-size: cover;
        background-repeat: no-repeat;
        button{
          @include font-dpr(12px);
          color: #fff;
          border-radius: px2rem(20px);
          background: linear-gradient(90deg,#e76b98, #bd472d);
        }
      }
    }
    .m2{
      .bd{
        .van-col{
          justify-content: left;
          -webkit-align-items: flex-start;
          align-items: flex-start;
          padding: px2rem(20px) px2rem(10px);
          @include font-dpr(14px);
        }
        .pro-name{
          @include font-dpr(12px);
          line-height: px2rem(25px);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .ykb{
          display: flex;
          flex-direction: row;
          -webkit-align-items: center;
          align-items: center;
          color: #dec649;
        }
        label{
          height: px2rem(50px);
          display: flex;
          flex-direction: row;
          -webkit-align-items: center;
          align-items: center;
          color: #da3142;
        }
        .van-icon{
          margin-left: px2rem(5px);
          // color: #dec649;
          @include font-dpr(14px);
        }
        img{
          width: 35%;
          height: px2rem(100px);
          margin-left: 0;
          margin-right: px2rem(10px);
        }
      }
    }
    .m3{
      .bd{
        img{
          width: 100%;
          height: px2rem(200px);
          margin-left: 0;
          padding: px2rem(10px);
          box-sizing: border-box;
        }
        .van-col{
          display: flex;
          flex-direction: column;
          justify-content: left;
          -webkit-align-items: flex-start;
          align-items: flex-start;
          padding: 0;
          @include font-dpr(14px);
        }
        b{
          color: #da3142;
          margin-left: px2rem(10px);
        }
        .van-tag{
          position: absolute;
          // top:0;
        }
        .pro-name{
          margin:px2rem(5px) px2rem(10px) ;
          @include font-dpr(12px);
          line-height: px2rem(25px);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
    .recommend{
      .title{
        height: px2rem(60px);
        width: 100%;
      }
    }
  }

}
</style>
